<template>

  <el-dialog
    title="选择人员"
    :visible.sync="dialogVisible"
    width="50%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-container>
      <el-input
        v-model="searchContent"
        placeholder="搜索员工"
        class="input-with-select"
        style="margin: 5px auto"
        @keyup.enter.native="personfillter"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
        />
      </el-input>

      <el-main style="padding: 10px 0">
        <el-row>
          <el-col
            :span="12"
            class="departList"
          >
            <el-container>
              <el-main>
                <div class="my-list table-tree">
                  <el-tree
                    :data="department"
                    :props="deaprops"
                    :default-expand-all="true"
                    :highlight-current="true"
                    :accordion="false"
                    :expand-on-click-node="false"
                    @node-click="handleNodeClick"
                  />
                </div>
              </el-main>
            </el-container>
          </el-col>
          <el-col
            :span="12"
            style="padding-left: 10px"
          >
            <el-row>
              <el-col
                :span="24"
                class="departList"
              >
                <el-container>
                  <el-main>
                    <el-table
                      ref="personref"
                      :data="tableData"
                      :border="false"
                      style="width: 100%"
                      @select="handleSelect"
                      @selection-change="handleSelectChange"
                      @row-click="handleRow"
                      @select-all="handleSelectAll"
                    >
                      <el-table-column
                        prop="Name"
                        label="全选"
                        width=""
                      />
                      <el-table-column
                        type="selection"
                        width="90"
                      />
                    </el-table>
                  </el-main>
                </el-container>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-main>
      <el-main class="select-person">
        <el-row
          type="flex"
          style="flex-wrap: wrap"
        >
          <el-tag
            v-for="tag in tags"
            :key="tag.Id"
            :type="tag.type"
            style="margin: 10px"
            closable
            @close="handleClose(tag)"
          >
            {{ tag.Name }}
          </el-tag>
        </el-row>
      </el-main>
      <el-footer>

        <div>
          <el-button
            size="medium"
            @click="onCancel"
          >返回</el-button>
          <el-button
            type="primary"
            size="medium"
            @click="onSubmit"
          >提交</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-dialog>

</template>
<script>
import { getDepartment } from '@/api/department/department'
import { GetUserByOrgId, GetUserByName } from '@/api/user/user'
import { deepClone } from '@/utils/index'
export default {
  props: {
    echoList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      flag: false,
      isSign: false,
      selectArr: [],
      deaprops: {
        value: 'Id', // ID字段名
        label: 'OrgName', // 显示名称
        children: 'Children' // 子级字段名
      },
      dialogVisible: false, // 弹窗
      searchContent: '',
      tableData: [],
      department: [],
      tags: []
    }
  },
  watch: {
    echoList: {
      deep: true,
      handler(val) {
        this.tags = deepClone(val)
      }
    }
  },
  mounted() {},
  methods: {
    handleRow(row) {
      this.$refs.personref.toggleRowSelection(row)
      var ischeck = this.selectArr.indexOf(row) > -1 // 是否选中
      var ischecked = false // 是否已选择
      this.tags.forEach(item => {
        if (item.Id === row.Id) {
          ischecked = true
          if (!ischeck) {
            // 取消选中
            this.tags.splice(this.tags.indexOf(item), 1)
          }
        }
      })
      if (ischeck && !ischecked) {
        // 全选 && 未被选择  添加当前项
        this.tags.push(row)
      }
    },
    handleSelectChange(val) {
      this.selectArr = val
    },
    // 获取部门数据
    getdepartment() {
      getDepartment().then(res => {
        this.department = res.Data
      })
    },
    // 通过部门id获取人员列表
    getuserlist(departId) {
      GetUserByOrgId(departId).then(res => {
        this.tableData = res.Data
        this.setChecked()
      })
    },

    // table回显
    setChecked() {
      this.$nextTick(() => {
        if (this.tags.length > 0 && this.tableData.length > 0) {
          this.tableData.forEach(item => {
            var ischeck = false
            this.tags.forEach(citem => {
              if (item.Id === citem.Id) {
                ischeck = true
              }
            })
            this.$refs.personref.toggleRowSelection(item, ischeck)
          })
        }
      })
    },
    // 移除tag
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
      for (let index = 0; index < this.tableData.length; index++) {
        if (tag.Id === this.tableData[index].Id) {
          this.$refs.personref.toggleRowSelection(this.tableData[index], false)
        }
      }
    },
    onCancel() {
      this.dialogVisible = false
      this.tags = []
    },
    onSubmit() {
      this.dialogVisible = false
      // 回调方法tags为选中的数组值
      this.$emit('allSelect', this.tags) //
    },
    // 选择table某一行
    handleSelect(selection, row) {
      var ischeck = selection.indexOf(row) > -1 // 是否选中
      var ischecked = false // 是否已选择
      this.tags.forEach(item => {
        if (item.Id === row.Id) {
          ischecked = true
          if (!ischeck) {
            // 取消选中
            this.tags.splice(this.tags.indexOf(item), 1)
          }
        }
      })
      if (ischeck && !ischecked) {
        // 全选 && 未被选择  添加当前项
        this.tags.push(row)
      }
    },
    // 选择所有
    handleSelectAll(selection) {
      var checkall = selection.length > 0
      this.tableData.forEach(item => {
        var ischecked = false // 是否已选择
        this.tags.forEach(citem => {
          if (item.Id === citem.Id) {
            ischecked = true
            if (!checkall) {
              // 取消全选 移除当前tableData中的项
              this.tags.splice(this.tags.indexOf(citem), 1)
            }
          }
        })
        if (checkall && !ischecked) {
          // 全选 && 未被选择 添加当前tableData中的项
          this.tags.push(item)
        }
      })
    },
    // 打开弹窗
    showSelectPersonDialog() {
      this.dialogVisible = true
      this.getdepartment()
      this.getuserlist()
    },
    // 点击部门树
    handleNodeClick(data) {
      this.getuserlist(data.Id)
    },
    personfillter() {
      GetUserByName(this.searchContent).then(res => {
        this.tableData = res.Data
        this.setChecked()
      })
    }
  }
}
</script>
